<template>
    <van-steps :active="active" active-icon="success">
        <van-step>验证手机号</van-step>
        <van-step>接收验证码</van-step>
        <van-step>注册</van-step>
        <van-step>完成</van-step>
    </van-steps>
    <!-- 每一步具体步骤 -->
    <div class="step-1" v-if="active === 0">
        <van-cell-group inset>
            <van-field v-model.trim="phone" label="手机号码" placeholder="请输入手机号码" required />
        </van-cell-group>
        <div class="next-btn">
            <van-button type="primary" size="small" @clcik="handleSteps(0)">下一步</van-button>
        </div>
    </div>

    <div class="step-2" v-if="active === 1">
        <van-cell-group inset>
            <van-field v-model.trim="phone" label="手机号码" placeholder="请输入手机号码" />
        </van-cell-group>
        <van-cell-group inset>
            <van-field v-model="code" center clearable label="短信验证码" placeholder="请输入短信验证码">
                <template #button>
                    <van-button size="small" type="primary" @clcik="handleSendCode()">发送验证码</van-button>
                </template>
            </van-field>
        </van-cell-group>
        <div class="next-btn">
            <van-button type="primary" size="small" @clcik="handleSteps(1)">下一步</van-button>
        </div>
    </div>

    <div class="step-3" v-if="active === 2">
        <van-cell-group inset>
            <van-field v-model.trim="tel" label="手机号码" placeholder="请输入手机号码" />
        </van-cell-group>
        <van-cell-group inset>
            <van-field v-model="password" :type="passType" label="密码" placeholder="请输入密码" :right-icon="passIcon"
                @click-right-icon="handleChangeType" />
        </van-cell-group>
        <div class="next-btn">
            <van-button type="primary" size="small" @clcik="handleSteps(2)">注册</van-button>
        </div>
    </div>

    <div class="step-4 success" v-if="active === 3">
        恭喜您, 注册成功!
        <div>
            <router-link to="/login">5秒后自动跳转到登录</router-link>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { checkPhone,getCode,vertifyCode,registerApi } from '@/api/login-register.ts'
import { showNotify } from 'vant'

const active = ref(0)
const phone = ref()
const code = ref()
const password = ref()
const timer = undefined
//检测手机号有没有被注册
const handleCheck = async () => {
    if (!phone.value) {
        return
    }
    try {
        await check(phone.value)
        // 下一步
        active.value += 1
    } catch (error) {
        showNotify('手机号已被注册')
    }
}

// 发送验证码
const handleSendCode = async() => {
  try {
    const result: any = await getCode(phone.value)
    console.log('result:', result)
    // 将验证码回显到文本框中
    code.value = result
  } catch (error) {
    console.error('error:', error)
  }
}

// 校验短信验证码
const handleCodeCheck = async () => {
  try {
    await vertifyCode(phone.value, code.value)
    // 下一步
    active.value += 1
  } catch (error) {
    console.error('error:', error)
  }
}

//用户注册
const handleRegister = async() => {
  try {
    await registerApi(phone.value, password.value)
    // 下一步
    active.value += 1

    // 5秒后自动跳转到登录
    timer = setTimeout(() => router.push('/login'), 5000)
  } catch (error) {
    console.error('error:', error)
  }
}
// 步骤处理
const handleSteps = (index: number) => {
    switch (index) {
        case 0: // 验证手机号是否已被注册
            console.log(index)
            handleCheck()
            break
        case 1: // 校验短信验证码
            handleCodeCheck()
            break
        case 2: // 注册
            handleRegister()
            break
    }
}
</script>

<style lang="less" scoped>
.next-btn {
    padding: 0 12px;
    text-align: right;
}

.success {
    line-height: 3;
    font-size: 18px;
    text-align: center;
}
</style>
